<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 不以/开始的相对路径找资源，以当前资源的路径为基准，经常容易出问题 -->
<!-- 以/开始的相对路径找资源，以服务器的路径为标准（http://localhost:3306),需加上项目名 -->
<!-- 引入jQuery -->
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入样式 -->
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>

<!-- 	信息修改 -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">员工修改</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label  class="col-sm-2 control-label">empName</label>
							<div class="col-sm-10">
<!-- 								<input type="text" class="form-control" name="empName" id="empName_update_input" -->
<!-- 									placeholder="empName"> -->
<!-- 								<span class="help-block"></span> -->
								<p class="form-control-static" id="empName_update_static"></p>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="email" id="email_update_input"
									placeholder="emial@pukaishun.com">
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline">
								  <input type="radio" name="gender" id="gender1_update_input" checked="checked" value="M">男
								</label>
								<label class="radio-inline">
								  <input type="radio" name="gender" id="gender2_update_input" value="F">女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">deptName</label>
							<div class="col-sm-4">
 								<select class="form-control" name="dId" id="dept_update_select">
<!--  									部门提交，部门Id即可  -->
									
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
				</div>
			</div>
		</div>
	</div>


	<!-- 员工添加的模态框 -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">员工添加</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label  class="col-sm-2 control-label">empName</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="empName" id="empName_add_input"
									placeholder="empName">
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="email" id="email_add_input"
									placeholder="emial@pukaishun.com">
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline">
								  <input type="radio" name="gender" id="gender1_add_input" checked="checked" value="M">男
								</label>
								<label class="radio-inline">
								  <input type="radio" name="gender" id="gender2_add_input" value="F">女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">deptName</label>
							<div class="col-sm-4">
 								<select class="form-control" name="dId" id="dept_add_select">
<!--  									部门提交，部门Id即可  -->
									
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="emp_save_btn">提交</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 		标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>PKS_CRUD</h1>
			</div>
		</div>
		<!-- 		按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-10">
				<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button class="btn btn-danger" id="emp_delete-all_btn">批量删除</button>
			</div>
		</div>
		<!-- 		显示内容 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="check_all">
							</th>
							<th>empID</th>
							<th>empName</th>
							<th>empGender</th>
							<th>empEmail</th>
							<th>empDept</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
		<!-- 		显示分页 -->
		<div class="row">
			<!-- 		分页信息 -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 			分页码条信息-->
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>
	<script type="text/javascript" >
	var currentPage;
	var totalRecord;
	// 页面加载完成以后，直接发送一个Ajax请求，要到分页数据
	$(function() {
		// 去第一页
		to_page(1);
	});
	function to_page(pn) {
		$.ajax({
			url : "${APP_PATH}/emps",
			data : "pn=" + pn,
			type : "GET",
			success : function(result) {
				// console.log(result);
				// 1.解析并显示员工数据
				bulid_emps_table(result);
				// 2.解析并显示分页数据
				bulid_page_info(result);
				// 3.解析显示分页条数据
				build_page_nav(result);
			}
		});
	}
	function bulid_emps_table(result) {
		// 清空table表格
		$("#emps_table tbody").empty();
		var emps = result.extend.pageInfo.list;
		$
				.each(
						emps,
						function(index, item) {
							// alert(item.empName);
							var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td> ")
							var empIdTd = $("<td></td>").append(item.empId);
							var empNameTd = $("<td></td>").append(item.empName);
							// var gender = item.gender=='M'?"男":"女";
							var genderTd = $("<td></td>").append(
									item.gender == 'M' ? "男" : "女");
							var emailTd = $("<td></td>").append(item.email);
							var empDeptTd = $("<td></td>").append(
									item.department.deptName);

							var editBtn = $("<button></button>").addClass(
									"btn btn-primary btn-sm edit_btn").append(
									$("<span></span>").addClass(
											"glyphicon glyphicon-pencil")).append(
									"编辑");
							// 为编辑按钮添加一个自定义的属性，来表示当前员工的id
							editBtn.attr("edit-id", item.empId);
							var delBtn = $("<button></button>").addClass(
									"btn btn-danger btn-sm delete_btn").append(
									$("<span></span>").addClass(
											"glyphicon glyphicon-trash")).append(
									"删除");

							// 为删除按钮添加一个自定义属性，来表示当前员工的Id
							delBtn.attr("del-id", item.empId);
							var btnTd = $("<td></td>").append(editBtn).append(" ")
									.append(delBtn);

							// append方法执行完成以后还是返回原来的元素
							$("<tr></tr>").append(checkBoxTd).append(empIdTd)
									.append(empNameTd).append(genderTd).append(
											emailTd).append(empDeptTd)
									.append(btnTd).appendTo("#emps_table tbody");
						});
	}
	// 解析显示分页信息的
	function bulid_page_info(result) {
		$("#page_info_area").empty();
		$("#page_info_area").append(
				"当前" + result.extend.pageInfo.pageNum + "页，总"
						+ result.extend.pageInfo.pages + "页,总"
						+ result.extend.pageInfo.total + "条记录");
		totalRecord = result.extend.pageInfo.total;
		currentPage = result.extend.pageInfo.pageNum;
	}

	// 解析显示分页条,点击分页能够显示数据
	function build_page_nav(result) {
		$("#page_nav_area").empty();
		var ul = $("<ul></ul>").addClass("pagination");

		// 构建元素
		var firstPageLi = $("<li></li>").append(
				$("<a></a>").append("首页").attr("href", "#"));
		var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
		if (result.extend.pageInfo.hasPreviousPage == false) {
			firstPageLi.addClass("disabled");
			prePageLi.addClass("disabled");
		} else {
			// 为元素添加翻页的事件
			firstPageLi.click(function() {
				to_page(1);
			});
			prePageLi.click(function() {
				to_page(result.extend.pageInfo.pageNum - 1);
			});
		}

		var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
		var lastPageLi = $("<li></li>").append(
				$("<a></a>").append("末页").attr("href", "#"));
		if (result.extend.pageInfo.hasNextPage == false) {
			nextPageLi.addClass("disabled");
			lastPageLi.addClass("disabled");
		} else {
			nextPageLi.click(function() {
				to_page(result.extend.pageInfo.pageNum + 1);
			});
			lastPageLi.click(function() {
				to_page(result.extend.pageInfo.pages);
			});
		}

		ul.append(firstPageLi).append(prePageLi);
		// 添加首页和前一页的提示
		// 遍历页码号
		$.each(result.extend.pageInfo.navigatepageNums, function(index, item) {
			var numLi = $("<li></li>").append($("<a></a>").append(item));
			if (result.extend.pageInfo.pageNum == item) {
				numLi.addClass("active");
			}
			numLi.click(function() {
				to_page(item);
			});
			ul.append(numLi);
		});
		// 添加下一页和末页的提示
		ul.append(nextPageLi).append(lastPageLi);
		// 把ul加入nav中
		var navEle = $("<nav></nav>").append(ul);
		navEle.appendTo("#page_nav_area");

	}
	function reset_form(ele) {
		$(ele)[0].reset();
		$(ele).find("*").removeClass("has-error has-success");
		$(ele).find(".help-block").text("");
	}

	// 查出所有部门信息，显示在下拉列表中
	function getDepts(ele) {
		$(ele).empty();
		$.ajax({
			url : "${APP_PATH}/depts",
			type : "GET",
			success : function(result) {
				// console.log(result);
				// $("#dept_add_select").addpend("")
				$.each(result.extend.depts, function() {
					var optionEle = $("<option ></option>").append(this.deptName)
							.attr("value", this.deptId);
					optionEle.appendTo(ele);
				});
			}
		})
	}

	// 点击新增按钮，弹出模态框
	$("#emp_add_modal_btn").click(function() {
		// 表单完整重置
		// 表单重置
		reset_form("#empAddModal form");
		// $("#empAddModal form")[0].reset(); //jquery没有reset()方法，需要调用dom对象进行调换使用。
		// 发送ajax，查出部门信息，显示下拉列表
		getDepts("#dept_add_select");
		$("#empAddModal").modal({
			backdrop : "static"
		});

	});
	// 校验数据的可行性
	function validate_add_form() {
		// 拿到要校验的数据，可以使用正则表达式
		var empName = $("#empName_add_input").val();
		var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
		if (!regName.test(empName)) {
			show_validate_msg("#empName_add_input", "error",
					"用户名可以是2-5位中文或者6-16位的数字和英文组合");
			return false;
		} else {
			show_validate_msg("#empName_add_input", "success", "");

		}
		// 校验邮箱信息
		var email = $("#email_add_input").val();
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if (!regEmail.test(email)) {
			show_validate_msg("#email_add_input", "error", "邮箱格式不对");
			return false;
		} else {
			show_validate_msg("#email_add_input", "success", "");
		}
		return true;
	}

	function show_validate_msg(ele, status, msg) {
		$(ele).parent().removeClass("has-success has-error");
		$(ele).next("span").text("");
		if ("success" == status) {
			$(ele).parent().addClass("has-success");
			$(ele).next("span").text(msg);
		} else if ("error" == status) {
			$(ele).parent().addClass("has-error");
			$(ele).next("span").text(msg);
		}
	}

	$("#empName_add_input").change(
			function() {
				// 发送ajax，校验用户名是否可用
				var empName = this.value;
				$.ajax({
					url : "${APP_PATH}/checkuser",
					type : "POST",
					data : "empName=" + empName,
					success : function(result) {
						if (result.code == 100) {
							show_validate_msg("#empName_add_input", "success", "");
							$("#emp_save_btn").attr("ajax-va", "success");
						} else {
							show_validate_msg("#empName_add_input", "error",
									result.extend.va_msg);
							$("#emp_save_btn").attr("ajax-va", "error");
						}
					}

				});
			})

	$("#emp_save_btn").click(
			function() {
				// 将模态框中填写的数据交个服务进行保存
				// 需要对数据进行校验
				if (!validate_add_form()) {
					return false;
				}

				// 判断ajax的用户名校验是否成功了
				if ($(this).attr("ajax-va") == "error") {
					return false;
				}

				// 发送ajax保存员工
				// alert($("#empAddModal form").serialize());
				$.ajax({
					url : "${APP_PATH}/emp",
					type : "POST",
					data : $("#empAddModal form").serialize(),
					success : function(result) {
						// // alert(result.msg);
						if (result.code == 100) {
							// 员工保存成功，关闭模态框，来到最后一页，显示刚才保存的数据
							$("#empAddModal").modal('hide');
							to_page(totalRecord);
						} else {
							// 显示失败信息
							// console.log(result);
							// 有那个字段的错误信息就显示那个字段
							if (undefined != result.extend.errorFields.email) {
								// 显示邮箱的错误信息
								show_validate_msg("#email_add_input", "error",
										result.extend.errorFields.email);
							}
							if (undefined != result.extend.errorFields.empName) {
								// 显示与员工名字的错误信息
								show_validate_msg("#empName_add_input", "error",
										result.extend.errorFields.empName);
							}

						}
					}
				})
			})

	// 1.我们是在创建之先绑定了click,所以绑定不上
	// 解决方法：1可以在创建按钮的时候绑定事件
	// 2.绑定点击live()
	// 新版本已经没有live了，用on进行替代
	$(document).on("click", ".edit_btn", function() {
		// alert("edit");

		// 1.查出部门信息，显示部门列表
		getDepts("#dept_update_select");
		// 查出员工信息，显示员工信息
		getEmp($(this).attr("edit-id"));
		// 3.把员工的id传给模态框的更新按钮
		$("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
		$("#empUpdateModal").modal({
			backdrop : "static"
		});
	});

	function getEmp(id) {
		$.ajax({
			url : "${APP_PATH}/emp/" + id,
			type : "GET",
			success : function(result) {
				// console.log(result);
				var empData = result.extend.emp;
				$("#empName_update_static").text(empData.empName);
				$("#email_update_input").val(empData.email);
				$("#empUpdateModal input[name=gender]").val([ empData.gender ]);
				$("#empUpdateModal select").val([ empData.dId ]);
			}
		})
	}

	// 点击更新，更新员工信息
	$("#emp_update_btn").click(function() {
		// 校验邮箱信息
		var email = $("#email_update_input").val();
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if (!regEmail.test(email)) {
			show_validate_msg("#email_update_input", "error", "邮箱格式不对");
			return false;
		} else {
			show_validate_msg("#email_update_input", "success", "");
		}
		// 发送ajax请求，保存员工数据
		$.ajax({
			url : "${APP_PATH}/emp/" + $(this).attr("edit-id"),
			// type:"POST",
			// data:$("#empUpdateModal form").serialize()+"&_method=PUT",
			type : "PUT",
			data : $("#empUpdateModal form").serialize(),
			success : function(result) {
				// alert(result.msg);
				if (result.code == 100) {
					// 员工保存成功，关闭模态框，来到当前一页，显示刚才保存的数据
					$("#empUpdateModal").modal('hide');
					to_page(currentPage);
				}
			}
		})
	})
	// 单个删除
	$(document).on("click", ".delete_btn", function() {
		// 1.弹出时候确认删除对话框
		var empName = $(this).parents("tr").find("td:eq(2)").text();
		var empId = $(this).attr("del-id");
		// alert(empName);
		if (confirm("确认删除【" + empName + "】" + "吗")) {
			$.ajax({
				url : "${APP_PATH}/emp/" + empId,
				type : "DELETE",
				success : function(result) {
					if (result.code == 100) {
						// 员工删除成功，回到本页
						// alert(result.msg);
						to_page(currentPage);
					}

				}
			})
		}
	});

	// 完成全选/全不选
	$("#check_all").click(function() {
		// attr获取checkd是undefined,attr用来获取自定义属性
		// /使用prop来读取dom原生属性
		// $(this).prop("checked");
		$(".check_item").prop("checked", $(this).prop("checked"));
	});

	// check_item
	$(document).on("click", ".check_item", function() {
		// 判断当前选择的元素是否是五个
		var flag = $(".check_item:checked").length == $(".check_item").length;
		$("#check_all").prop("checked", flag);
		// $("#chekc_all")
	})

	// 点击全部删除，就批量删除
	$("#emp_delete-all_btn").click(function() {
		// $(".check_item:checked")

		var empNames = "";

		var del_idstr = "";
		$.each($(".check_item:checked"), function() {
			empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
			// alert(empNames);
			// 组装员工id字符串
			del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
		});
		empNames = empNames.substring(0, empNames.length - 1);
		// 删除员工id多余的-
		del_idstr = del_idstr.substring(0, del_idstr.length - 1);
		if (confirm("确认删除【" + empNames + "】吗？")) {
			$.ajax({
				url : "${APP_PATH}/emp/" + del_idstr,
				type : "DELETE",
				success : function() {
					to_page(currentPage);
				}
			})
		}
	})
	</script>
</body>
</html>